import "./index.scss";
import { Table, Form, Input, Button, Select } from "antd";
import type { TableProps } from "antd";
import type { FormProps } from "antd";

const data: DataType[] = [
	{
		key: "1",
		type: "John Brown",
		time: "2001",
		status: true,
	},
	{
		key: "2",
		type: "Alice Smith",
		time: "2002",
		status: false,
	},

	{
		key: "3",
		type: "Bob Johnson",
		time: "2003",
		status: true,
	},

	{
		key: "4",
		type: "Charlie Lee",
		time: "2004",
		status: false,
	},

	{
		key: "5",
		type: "Diana Ross",
		time: "2005",
		status: true,
	},
];
interface DataType {
	key: string;
	type: string;
	time: string;
	status: boolean;
}

type FieldType = {
	name?: string;
	type?: string;
};

const columns: TableProps<DataType>["columns"] = [
	{
		title: "序号",
		dataIndex: "key",
		key: "key",
	},
	{
		title: "考试类型",
		dataIndex: "type",
		key: "type",
	},
	{
		title: "考试时间",
		dataIndex: "time",
		key: "time",
	},
	{
		title: "状态",
		key: "status",
		dataIndex: "status",
		render: (_, { status }) => (
			<div className="table_status">
				<div className={status ? "grey" : "red"}></div>
				<span>{status ? "已阅卷" : "未阅卷"}</span>
			</div>
		),
	},
	{
		title: "操作",
		key: "action",
		render: (_, { status }) => (
			<div className="btn">{status ? "查看" : "批阅"}</div>
		),
	},
];
const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
	console.log("Success:", values);
};
const handleChange = (value: string) => {
	console.log(`selected ${value}`);
};
function CorretExamList() {
	return (
		<div className="corretExamList_wrap">
			<div className="examHistory_form">
				<Form layout="inline" onFinish={onFinish}>
					<Form.Item<FieldType>
						name="name"
						rules={[{ required: true, message: "请输入学员花名!" }]}
					>
						<Input placeholder="请输入学员花名" />
					</Form.Item>

					<Form.Item<FieldType>
						name="type"
						rules={[{ required: true, message: "请选择考试类型!" }]}
					>
						<Select
							placeholder="请选择考试类型"
							style={{ width: 180 }}
							onChange={handleChange}
							options={[
								{ value: "jack", label: "Jack" },
								{ value: "lucy", label: "Lucy" },
								{ value: "Yiminghe", label: "yiminghe" },
							]}
						/>
					</Form.Item>

					<Form.Item wrapperCol={{ offset: 2, span: 22 }}>
						<Button type="primary" htmlType="submit">
							查询
						</Button>
					</Form.Item>
				</Form>
			</div>
			<Table columns={columns} dataSource={data} />
		</div>
	);
}

export default CorretExamList;
